<template>
	<view class="container" :class="'theme-'+theme">
<!-- 	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" >
				<image src="../../static/newh5/fanhui.png"
				class="yticon"
				style="width: 13px;height: 20px;color:black"
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">通知公告</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view> -->
		<view v-if="!hasLogin || (lists.length == 0)">
			<empty></empty>
		</view>
		<scroll-view v-else class="list-scroll-content" scroll-y @scrolltolower="toBottom">
			<view class="list-cell b-b m-t" v-for="(list, index) in lists" :key="index" @click="goDetail(list)"
				hover-class="cell-hover" :hover-stay-time="50">
				<view class="">
					<text class="cell-tit font-list">{{ list.title }}</text>
					<text class="tag" v-if="!list.isRead">new</text><br />
					<text class="cell-tit">{{ list.issueDate }}</text>
				</view>
				<view class="">
					<text class="cell-more yticon icon-you"></text>
				</view>
			</view>
			<uni-load-more style="background-color: #fff" :status="loadingType"></uni-load-more>
		</scroll-view>
		<fjj-condition ref='condition' @touchmove.stop :color="color" :list="menuList" :defaultValue="defaultValue" @change="conditionChange" @result="resultConditon" />
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
	import {
		mapMutations,
		mapState,

	} from 'vuex';
	import {
		getInformNoticeList,
		isRead,
		releasePage
	} from '../../api/message/message.js'
	import empty from "@/components/empty";
	let timeout = null;
	export default {
		components: {
			empty,
			uniLoadMore,
			fjjCondition
		},
		data() {
			return {
				lists:[],
				page: 1,
				limit: 12,
				loadingType: 'more',
				color: '#ED3333',
				hasChoose: false,
				param:{},
				menuList: [{
						'title': '类型',
						'type': 'custom',
						'key': 'custom3',
						'isMutiple': false, //多选
						'detailList': [{
							title: '公告',
							value: "1",
							isSelected: true
						}, {
							title: '帮助中心',
							value: "2",
						}],
					},{
						'title': '类型',
						'type': 'custom',
						'key': 'custom4',
						'isMutiple': false, //多选
						'detailList': [{
							title: '全部公告',
							isSelected:true,
							value: "采购公告,平台公告",
						},{
							title: '平台公告',

							value: "平台公告",
						}, {
							title: '采购公告',
							value: "采购公告",
						}]},{
						'title': '发布开始时间',
						'type': 'rangetime',
						'key': 'custom5',
						'isMutiple': false, //多选
						},{
						'title': '发布结束时间',
						'type': 'rangetime',
						'key': 'custom6',
						'isMutiple': false, //多选
						}],
				defaultValue: {},
				statusString: '采购公告,平台公告',
				searchVal: ''
			};
		},
		onShow(){
			this.loadData()
		},
		onLoad(){
			this.loadData('refresh',{})
		},
		// onReachBottom() {
		// 	this.loadData()
		// },
		computed:{
			...mapState(['hasLogin']),
		},
		onNavigationBarButtonTap(val) {
		           this.$refs.condition.visibleDrawer = true;
		        },
				onNavigationBarSearchInputChanged (val) {
					console.log(val)
					this.searchVal = val.text
					this.loadData('refresh')
				},
				onNavigationBarSearchInputConfirmed(val) {
					this.searchVal = val.text;
					this.loadData('refresh')
				},
		methods: {

			conditionChange(obj) {
				let arr = []
				if(obj.key == "custom3" && obj.index == 0) {
					this.$set(this.menuList[0],'detailList',[])
					arr = [{
							title: '全部公告',
							value: "采购公告,平台公告",
							isSelected:true,
						},{
							title: '平台公告',

							value: "平台公告",
						}, {
							title: '采购公告',
							value: "采购公告",
						}]
					this.$set(this.menuList[1],'detailList',arr)
					this.$set(this.menuList[0],'detailList',[{
							title: '公告',
							value: "1",
							isSelected: true
						}, {
							title: '帮助中心',
							value: "2",
						}])

				}
				if(obj.key == "custom3" && obj.index == 1) {
					this.$set(this.menuList[0],'detailList',[])
					arr = [{
							title: '全部公告',
							value: "购物流程,常见问题",
							isSelected:true,
						},{
							title: '购物流程',

							value: "1",
						}, {
							title: '常见问题',
							value: "2",
						}]
					this.$set(this.menuList[1],'detailList',arr)
					this.$set(this.menuList[0],'detailList',[{
							title: '公告',
							value: "1",
						}, {
							title: '帮助中心',
							value: "2",
							isSelected: true
						}])

				}
				if(obj.key == 'custom4') {
					let isSelect = obj.list.filter(item => {
						return item.isSelected == true
					})
					this.statusString = isSelect.value
				}
			},
			//筛选返回值
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
				let param = {
					status: obj.result.custom4,
					beginStarTime:obj.result.custom5Min,
					endStarTime:obj.result.custom5Max,
					beginTime:obj.custom6Min,
					endTime: obj.custom6Max

				}
				this.page = 1
				this.param =param
				this.loadData('refresh',param)
			},

			returnIndex() {
				goback()
			},
			toBottom() {
				console.log('滑到底');
				this.loadData('refresh',this.param)
			},
			...mapMutations(['logout']),
			loadData(type,obj) {
				if(type) {
					this.page = 1
				}
				if (this.loadingType === "loading") {
					return;
				}
				this.loadingType = "loading";
				let total = 0;
				let list = [];

				const param = {
					page: this.page,
					limit: this.limit,
					title:this.searchVal,
					...obj
					// pageType: 1,
				};
				releasePage(param).then((res) => {
					if (res.code === 0) {
						list = res.data.records;
						// list.forEach((item) => {
						// 	this.lists.push(item);
						// });
						if (type === 'refresh') {
							this.lists = list;
						} else {
							this.lists = this.lists.concat(list);
						}
						total = parseInt(res.data.total);
						if (this.lists.length === total) {
							this.loadingType = "noMore";
						} else {
							this.loadingType = "more";
						}
						this.page++;

					} else {
						this.toast(res.message);
						this.loadingType = "more";
					}
				});
			},
			// loadData(){
			// 	getInformNoticeList().then(res=>{
			// 		if(res.code == 0){
			// 			console.log('返回内容',res.data);
			// 			this.lists = JSON.parse(JSON.stringify(res.data.records	))
			// 		}
			// 	})
			// },
			//已读确认
			isRead(val){
				const params ={
					articleId:val
				}
				isRead(params).then(res=>{
					console.log('res',res);
				})
			},

			goDetail(item){
				debugger
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，不能进行此操作',
						confirmText: '去登录',
						cancelText: '取消',
						success: (suc) => {
							if (suc.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						}
					})
				} else {
					console.log(item)
					this.isRead(item.id)
					//页面控制已读
					item.isRead = true
					console.log('item',item);
					if(item.colunmsName == '采购公告') {
						uni.navigateTo({
							url: `/pages/message/informPurchaseDetail?id=${item.id}&articleType=${item.articleType}&colunmsName=${item.colunmsName}&orderSn=${item.orderSn}`
						})
					}else {
						uni.navigateTo({
							url: `/pages/message/informDetail?id=${item.id}&articleType=${item.articleType}`
						})
					}

				}
			},
			navTo(url) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，不能进行此操作',
						confirmText: '去登录',
						cancelText: '取消',
						success: (suc) => {
							if (suc.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},

		}
	}
</script>

<style lang='scss'>

	page {
		background: $page-color-base;
	}
	.container {
		height: 100%;
	}
	.list-scroll-content {
		position: relative;
		// height: 100%;
		height: 800px;
		display: flex;
		// padding-top: 16rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		flex-direction: column;
		flex-shrink: 0;
	}
	.tag {
		font-size: 24upx;
		width: fit-content;
		text-align: center;
		color: $base-color;
		margin-right: 10upx;
		background: #fffafb;
		border: 1px solid #ffb4c7;
		border-radius: 4upx;
		padding: 0upx 5upx;
		line-height: 1;
	}
	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: space-between;

		&.log-out-btn {
			margin-top: 30upx;
			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-sm ;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(.84);
		}
	}
</style>
